<template>
    <div class="regnew">
        <!-- 顶部 -->
        <van-nav-bar title="注册" left-arrow class="header" @click-left="goBack"></van-nav-bar>

        <!-- 验证码 -->
            <van-image>
                <template >我们将以短信的形式发送给你</template>
            </van-image>

        <!-- 短信验证 -->
        <van-field
                v-model="sms"
                center
                clearable
                placeholder="请输入短信验证码"
                @input="change"
        >                   
                <template #button>
                  <van-button class="button" size="small" type="primary" @click="next">发送验证码</van-button>
                </template>
        </van-field>

        <!-- 下一步 -->
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" class="reg" :disabled="flag" @click="gosuccess">下一步</van-button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            sms:'',
            flag:true
        }
    },
    methods: {
        goBack() {
            this.$router.back()
        },
        change(){
            if(Number(this.sms)){
                if(this.sms.toString().length>=5){
                    this.flag =false
                }
            }else{
                this.flag =true
            }
        },
        // 发送验证码
        next(){
            
            this.$service({
                method:'post',
                url:'user/dosendmsgcode',
                data:{
                    tel:this.$route.query.phone
                }
            })
            .then(res=>{
                if(res.data.code==200){
                    // console.log(res.data);
                    this.$toast(res.data.data)
                }
            })
        },
        // 验证验证码
        gosuccess(){
            this.$service({
                method:'post',
                url:'user/docheckcode',
                data:{
                    tel:this.$route.query.phone,
                    telcode:this.sms
                }
            })
            .then(res=>{
                if(res.data.code==200){
                    console.log(res.data);
                    this.$toast('注册成功，请设置密码')
                    this.$router.push('/pass')
                    
                }
            })
        }
    }
}
</script>

<style scoped> 
    .regnew{
        padding: .625rem;
    }
    .van-image{
        margin: 0 auto;
        width: 100%;
        height: 12.25rem;
        text-align: center;
        margin-bottom: 2.625rem;
    }
    .button{
        border: 0;
        background-color: pink;
        color: red;
    }

    .reg{
        border: 0;
        background:linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36));
    }
</style>